<template>
	<div v-if="key == this.routePath.defaultPath">
		<!-- 搜索 -->
		<el-form :inline="true" :model="searchForm">
			<el-form-item label="场次名称">
				<el-input placeholder="场次名称" v-model="searchForm.sceneName"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button class="filter-item" v-if="permission_add" type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 列表 -->
		<el-table :data="dataList" height="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="场次名称" prop="sceneName" align="center" ></el-table-column>
			<el-table-column label="开始时间" prop="startTime" align="center" >
				<template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
			</el-table-column>
			<el-table-column label="结束时间" prop="endTime" align="center" >
				<template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
			</el-table-column>
			<el-table-column label="时间状态" prop="timeStatus" width="140" align="center">
				<template slot-scope="scope">
					<template v-if="permission_modifystatus">
						<el-switch
							@change="handleStatusChange(scope.$index, scope.row)"
							:active-value="1"
							:inactive-value="2"
							v-model="scope.row.timeStatus">
						</el-switch>
					</template>
					<template v-else>
						{{scope.row.timeStatus == '1'?'启用':'禁用'}}
					</template>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="permission_view" type="text" size="small" @click="handleView(scope.row.id)">查看</el-button>
					<el-button v-if="permission_edit" type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
					<el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-divider></el-divider>
		<div align="center">
			<el-button type="info" @click="back">返回</el-button>
		</div>
	</div>
	<div v-else>
		<router-view :key="key"></router-view>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findSeckillSceneList,modifySenceStatus,deleteSeckillScene } from '@/api/activity/seckill'
	import {formatDate} from '@/utils/common';
	export default {
		name: 'seckillScene',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				dialogFormVisible: false,
				// 数据列表el-table
				dataList: [],
				//路由地址
				routePath: {
					defaultPath: '/activity/seckill/scene',
					addPath: '/activity/seckill/scene/add',
					editPath: '/activity/seckill/scene/edit',
				},
				// 权限按钮控制
				permission_add: false,
				permission_edit: false,
				permission_delete: false,
				permission_view: false,
				permission_modifystatus: false,
				// 搜索条件
				searchForm: {
					sceneName: '',
					pageNum: 1,
					pageSize: 10
				},
				textMap: {
					update: '编辑时间区间',
					create: '新增时间区间'
				},
				dataForm: {
					id:'',
					sceneName: '',
					startTime: '',
					endTime: '',
					timeStatus: '',
				},
			}
		},
		computed: {
			key() {
				return this.$route.path
			},
			...mapGetters([
				'elementList'
			])
		},
		filters:{
			formatTime(time) {
				if (time == null || time === '') {
					return 'N/A';
				}
				let date = new Date(time);
				return formatDate(date, 'hh:mm:ss')
			}
		},
		components: {},
		created() {
			// 初始化获取数据列表
			this.getDateList()
			//初始化按钮权限
			this.permission_add = this.elementList['activity:seckillscene:add']
			this.permission_edit = this.elementList['activity:seckillscene:edit']
			this.permission_delete = this.elementList['activity:seckillscene:delete']
			this.permission_view = this.elementList['activity:seckillscene:detail']
			this.permission_modifystatus = this.elementList['activity:seckillscene:modifystatus']
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findSeckillSceneList(this.searchForm).then(res => {
					console.log("请求成功打印日志", res)
					this.dataList = res.data.responseData
				})
				this.loading = false
			},
			handleView(val) {
				this.$router.push({
					path: "this.routePath.viewPath",
					query: {
						id: val
					}
				});
			},
			handleEdit(val) {
				this.$router.push({
					path: "this.routePath.editPath",
					query: {
						id: val
					}
				});
			},
			handleDelete(val) {
				this.$confirm('删除后所关联活动商品将一并删除是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteSeckillScene(val).then(() => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList()
						});
					}).catch((err) => {
						this.$message.error(err.data.responseMessage);
					});
				});
			},
			handleCreate(){
				this.$router.push({path: this.routePath.addPath });
			},
			handleSearch() {

			},
			handleSizeChange(val) {
				this.searchForm.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.searchForm.pageNum = val
				this.getDateList()
			},
			handleStatusChange(index, row){
				this.$confirm('是否要修改该状态?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let data = {
						menuId: row.id,
						menuStatus: row.menuStatus
					}
					modifySenceStatus(data).then(() => {
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
					}).catch(e =>{
						this.$message.error(e.data.responseMessage);
						this.getDateList();
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
					this.getDateList();
				});
			},
			//返回上级菜单
			back() {
				this.$router.go(-1)
			},

		}
	}
</script>
